<template>
  <div class="selectBox">
    <a-tabs
      class="card"
      type="card"
      @change="handleChangeTab"
    >
      <a-tab-pane
        v-if="typeId===undefined"
        key="name"
        tab="按名称查找"
      >
        <!--        <div class="select">-->
        <!--          <span style="margin-left: 5px">快速搜索:</span>-->
        <!--          <a-input v-model="form.foodName" allow-clear style="width: 50%;"></a-input>-->
        <!--          <a-button @click="getTableData()">查询</a-button>-->
        <!--        </div>-->
        <div v-if="showLoading" class="center">
          <a-spin />
        </div>
        <div v-else>
          <a-empty v-if="tableData.length===0" class="center" />
          <div v-else>
            <a-row class="table">
              <a-radio-group
                style="width: 100%;height: 100%;"
                @change="handleChange($event.target.value)"
              >
                <a-col
                  class="right-border column"
                  span="8"
                >
                  <div
                    v-for="i in _.chunk(tableData,5)[0]"
                    :key="i.id"
                    class="item"
                  >
                    <a-radio :value="i.id">{{ i.foodName }}</a-radio>
                  </div>
                </a-col>
                <a-col
                  class="right-border column"
                  span="8"
                >
                  <div
                    v-for="i in _.chunk(tableData,5)[1]"
                    :key="i.id"
                    class="item"
                  >
                    <a-radio :value="i.id">{{ i.foodName }}</a-radio>
                  </div>
                </a-col>
                <a-col
                  class="column"
                  span="8"
                >
                  <div
                    v-for="i in _.chunk(tableData,5)[2]"
                    :key="i.id"
                    class="item"
                  >
                    <a-radio :value="i.id">{{ i.foodName }}</a-radio>
                  </div>
                </a-col>
              </a-radio-group>
            </a-row>
            <a-pagination
              v-model="form.pageNo"
              :defaultPageSize="15"
              :total="total"
              class="pagination"
              size="small"
              @change="getTableData()"
            />
          </div>
        </div>
      </a-tab-pane>
      <!--      按类型   -->
      <a-tab-pane
        key="type"
        tab="按类型查找"
      >
        <div v-if="showLoading" class="center" style="height: 300px;">
          <a-spin />
        </div>
        <div v-else>
          <a-row class="table">
            <a-col
              v-if="typeId===undefined"
              class="right-border column"
              span="8"
            >
              <div class="title">食物类名称</div>
              <div
                v-for="(i,index) in foodTypeOptions"
                :key="i.id"
                :class="{'item':true,'active':curIndex01===index}"
                @click="handleSelectedType(i.id);curIndex01=index;"
              >
                {{ i.name }}
              </div>
            </a-col>
            <a-col
              class="right-border column"
              :span="typeId===undefined?16:24"
            >
              <div class="title">食物类名称</div>
              <div
                v-for="(i,index02) in tableData"
                :key="i.id"
                :class="{'item':true,'active':curIndex02===index02}"
                @click="handleChange(i.id);curIndex02=index02;"
              >
                {{ i.foodName }}
              </div>
            </a-col>
          </a-row>
          <a-pagination
            v-model="form.pageNo"
            :total="total"
            class="pagination"
            hideOnSinglePage
            size="small"
            @change="getTableData()"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { foodOptionList, foodStoreList } from "@/api/modular/diet/dietManage";

export default {
  props: ["queryText", "typeId"],
  data() {
    return {
      foodTypeOptions: [],
      tableData: [],
      form: {
        pageNo: 1,
        pageSize: 15
      },
      foodName: undefined,
      total: 0,
      curIndex01: undefined,
      curIndex02: undefined,
      showLoading: false
    };
  },
  created() {
    this.initData();
  },
  watch: {
    queryText() {
      this.form.foodName = this.queryText;
      this.getTableData();
    },
    typeId(val) {
      val ? this.handleSelectedType(this.typeId) : this.getTableData();
    }
  },
  methods: {
    initData() {
      this.getFoodTypeOption();
      this.getTableData();
    },
    async getFoodTypeOption() {
      const { data: data } = await foodOptionList();
      this.foodTypeOptions = data;
    },
    async getTableData(form = this.form) {
      this.showLoading = true;
      const { data: data } = await foodStoreList(form);
      this.showLoading = false;
      this.tableData = data.rows;
      this.total = data.totalRows;
    },
    handleChangeTab(val) {
      if (val === "name") {
        this.getTableData();
      }
    },
    handleChange(id) {
      this.$emit("update:foodMaterialsId", id, this.tableData.find(i => i.id === id).foodName);
    },
    handleSelectedType(id) {
      this.getTableData({ FoodMaterialsTypeId: id });
    }
  }
};
</script>

<style lang="less" scoped>
.selectBox {
  width: 500px;
  position: absolute;
  border: 1px solid #d9d9d9;
  text-align: center;
  z-index: 100000;
  background: white;
}

::v-deep .ant-tabs-bar {
  margin: 0;
}

.right-border {
  border-right: 1px solid #d9d9d9;
}

.center {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

.card {
  width: 500px;
  background: white;
  border: 1px solid #d9d9d9;

  .table {
    padding: 10px 0;
    height: 300px;

    .column {
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;

      .title {
        height: 40px;
        line-height: 40px;
        padding: 0 5px 0 10px;
        color: #2b2b2b;
        background: #ddd;
      }

      .item {
        display: flex;
        align-items: center;
        padding-left: 10px;
        height: 20%;
      }

      .active {
        cursor: pointer;
        background: #5bc0de;
      }
    }
  }

  .pagination {
    margin-bottom: 5px;
    text-align: center;
  }
}
</style>